<template>
  <a-layout-sider v-model="collapsed" collapsible>
    <div class="log">
      <span>{{ collapsed? 'Blog' : 'My Blog' }}</span>
    </div>
    <!-- 使用 click 绑定事件点击 MenuItem.key 调用此函数 ; key 是item 的唯一标志-->
    <a-menu theme="dark" mode="inline" @click="goToPage">
      <a-menu-item key="index">
        <a-icon type="dashboard"></a-icon>
        <span>仪表盘</span>
      </a-menu-item>

      <a-sub-menu>
        <span slot="title"><a-icon type="file" /><span>文章管理</span></span>
        <a-menu-item key="artlist">
          <a-icon type="snippets"></a-icon>
          <span>文章列表</span>
        </a-menu-item>
        <a-menu-item key="addart">
          <a-icon type="form"></a-icon>
          <span>添加文章</span>
        </a-menu-item>
      </a-sub-menu>

      <a-menu-item key="catelist">
        <a-icon type="book"></a-icon>
        <span>分类列表</span>
      </a-menu-item>

      <a-menu-item key="userlist">
        <a-icon type="user"></a-icon>
        <span>用户管理</span>
      </a-menu-item>
      <a-menu-item key="jijinlist">
        <a-icon type="rise"></a-icon>
        <span>自选基金列表</span>
      </a-menu-item>
    </a-menu>

  </a-layout-sider>
</template>

<script>

export default {
  data () {
    return {
      // 定义菜单伸缩功能
      collapsed: false
    }
  },
  methods: {
    // 定义跳转事件
    goToPage (item) {
      this.$router.push('/admin/' + item.key).catch((err) => err)
    }
  }
}
</script>

<style scoped>
.log {
  height: 40px;
  margin: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
}
</style>
